import Layout from './layout'
import { Routes, Route } from 'react-router-dom'

import { useLocation, useNavigate } from 'react-router-dom'
import { useEffect } from 'react'
import Stroe from './store'
import { notification } from 'antd'
import NotFound from './views/NotFound'

import UserTom from './views/user/tom' // 指向 Tom 页面组件
import UserBill from './views/user/bill' // 指向 Bill 页面组件
import Login from './views/login'
import Home from './views/home'
import User from './views/system/user'
import Role from './views/system/role'
import Permission from './views/system/permission'

function App() {
    const toLogout = Stroe((state) => state.toLogout)
    const location = useLocation()
    const navigate = useNavigate()
    const token = localStorage.getItem('authToken')
    useEffect(() => {
        if (!token && location.pathname !== '/login') {
            toLogout().then(() => {
                navigate('/login')
            })
        } else {
            // 请勿重复登录
            if (token && location.pathname === '/login') {
                notification.info({
                    message: '提示',
                    description: '您已登录，无需重复登录！',
                    duration: 2,
                })
            }
        }
    }, [location, navigate, token])
    if (!token && location.pathname !== '/login') {
        return null
    }
    return (
        <Routes>
            <Route path="login" element={<Login />} />
            <Route path="/" element={<Layout />}>
                <Route index element={<Home />} />
                <Route path="user/tom" element={<UserTom />} />
                <Route path="user/bill" element={<UserBill />} />
                <Route path="system/user" element={<User />} />
                <Route path="system/role" element={<Role />} />
                <Route path="system/permission" element={<Permission />} />
                {/* 其他路由 */}
            </Route>
            <Route path="*" element={<NotFound />} />
        </Routes>
    )
}

export default App
